<template>
  <view class="order-detail-page">
    <!-- 订单信息列表 -->
    <view class="info-container">
      <view class="info-item" v-for="(item, index) in orderInfo" :key="index">
        <text class="info-label">{{ item.label }}</text>
        <text class="info-value" :class="{ 'price-highlight': item.isPrice }">{{ item.value }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 订单信息数据（isPrice标记需要红色显示的价格项）
      orderInfo: [
        { label: '订单号', value: '12345678978456456456', isPrice: false },
        { label: '订单时间', value: '2025-10-25 15:00:00', isPrice: false },
        { label: '会员姓名', value: '张三', isPrice: false },
        { label: '会员手机', value: '152xxxxxxxx', isPrice: false },
        { label: '会员卡号', value: '25698745', isPrice: false },
        { label: '套餐名称', value: '100分钟票', isPrice: false },
        { label: '套餐类型', value: '计时票', isPrice: false },
        { label: '套餐单价', value: '38.00', isPrice: true },
        { label: '购买数量', value: '2', isPrice: false },
        { label: '支付方式', value: '微信支付', isPrice: false },
        { label: '实付金额', value: '76.00', isPrice: false }
      ]
    };
  },
  mounted() {
  	uni.setNavigationBarTitle({
  		title: this.$t('title.ticketSalesRecordDetail')
  	});
  },
};
</script>

<style scoped>
/* 页面容器 - 100%高度 */
.order-detail-page {
  min-height: 100vh;
  background-color: #ffffff;
  padding: 16px;
  box-sizing: border-box;
}

/* 信息容器 */
.info-container {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}

/* 单个信息项 */
.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 16px;
  border-bottom: 1px solid #f5f5f5; /* 项间分隔线 */
}

/* 最后一项移除底部边框 */
.info-item:last-child {
  border-bottom: none;
}

/* 标签样式 */
.info-label {
  font-size: 15px;
  color: #666666;
  width: 110px; /* 固定标签宽度，确保对齐 */
  flex-shrink: 0; /* 防止标签被压缩 */
}

/* 值样式 */
.info-value {
  font-size: 15px;
  color: #333333;
  flex: 1;
  text-align: right; /* 内容右对齐 */
  padding-left: 10px; /* 与标签保持间距 */
  word-break: break-all; /* 长文本自动换行 */
}

/* 价格高亮样式（红色） */
.price-highlight {
  color: #ff4d4f;
  font-weight: 500;
}
</style>